<template>
    <fieldset>
        <legend>
            <h1>展示modal组件</h1>
            <modal :visible="show" @confirm="handleConfirm" @cancel="handleCancel">
                <!-- vue2的写法 -->
                <template v-slot:title>
                    <h1>充值提示</h1>
                </template>
                <!-- vu3的写法 -->
                <template #body>
                    <h4>您是否要充值36666个元宝?</h4>
                </template>
            </modal>
            <button @click="show = true">点击充值</button>
        </legend>
    </fieldset>
</template>
<script>
// 如果文件名是index.vue,那么可以直接省略这层索引路径
import modal from "./02modal"

export default {
    data() {
        return {
            show: false
        }
    },
    methods: {
        // 点击确定后的处理函数
        handleConfirm() {
            console.log('确定')
            this.show = false
            alert('充值成功')
        },
        //点击取消后触发的函数
        handleCancel() {
            console.log('取消')
            this.show = false
            alert('取消充值')
        }
    },
    components: {
        modal
    }
}
</script>